<extend name="base"/>

<block name="main">
    <div class="kb-box">

        <div class="kb-tab">
            <div class="kbt-btn active" onclick="checkType(this, -1)">全部</div>
            <div class="kbt-btn" onclick="checkType(this, 0)">未使用</div>
            <div class="kbt-btn" onclick="checkType(this, 1)">已使用</div>
            <div class="kbt-btn" onclick="checkType(this, 2)">已过期</div>
            <div class="clear"></div>
        </div>

        <div class="kb-list">

            <volist name="data" id="vo">
                <div class="kbl-box">
                    <div class="kblb-l">
                        <if condition="$vo['status'] gt 0">
                            <label class="kblbl-mc grey">{$vo.name}</label>
                            <label class="kblbl-sj grey">有效期至{$vo.expire_time}</label>
                            <else />
                            <label class="kblbl-mc">{$vo.name}</label>
                            <label class="kblbl-sj">有效期至{$vo.expire_time}</label>
                        </if>
                    </div>
                    <div class="kblb-r">
                        <if condition="$vo['status'] gt 0">
                            <div class="kblbr-je grey">￥<label>{$vo.deduct_price}</label></div>
                            <label class="kblbr-tj grey">满{$vo.min_price}元可用</label>
                            <else/>
                            <div class="kblbr-je">￥<label>{$vo.deduct_price}</label></div>
                            <label class="kblbr-tj">满{$vo.min_price}元可用</label>
                        </if>
                    </div>
                    <div class="clear"></div>
                    <div class="kblb-sm">优惠券满{$vo.min_price}元减{$vo.deduct_price}元</div>
                    <div class="kblb-zt">
                        <if condition="$vo['status'] == 1">
                            <img src="__HELPER_IMG__/icon_ysy.png"></img>
                            <else/>
                            <img src="__HELPER_IMG__/icon_ygq.png"></img>
                        </if>
                    </div>
                </div>
            </volist>

        </div>
    </div>
</block>

<block name="js">
    <script>
        var url = 'Apis/userCoupon';
        var param = {};
        var check_status;

        function checkType(that, status) {
            check_status = status;

            $('.kbt-btn').removeClass('active');
            $(that).addClass('active');

            $.showLoading('数据加载中');

            scroll(0, 0);//滚动条滑动至最顶端
            initLoad();

            var uid = "{$Think.session.uid}";

            param.status = status;
            param.uid = uid;
            param.page = page;

            post_ajax(url, param, function (res) {
                console.log(res)
                if (res.result == 1) {
                    var list = res.data

                    var html = readerHtml(list);
                    $('.kb-list').html(html);
                } else {
                    $('.kb-list').html('');
                    layer.msg(res.msg);
                }
            })
        }

        /**
         * 分页加载更多
         * */
        load(url, param, function (res) {
            var list = res.data;
            if (list.length > 0) {
                ++page;
                pageLoading = false;

                var html = readerHtml(list);
                $('.kb-list').append(html);
            } else {
                layer.msg('暂无更多数据');
            }
        });

        function readerHtml(list) {
            var html = '';
            if (list.length > 0) {
                list.forEach(function (val) {
                    var grey = val.status > 0 ? 'grey' : '';

                    if(val.status == 1){
                        var img = '<img src="__HELPER_IMG__/icon_ysy.png"></img>';
                    }else if(val.status == 2){
                        var img = '<img src="__HELPER_IMG__/icon_ygq.png"></img>';
                    }

                    html += '<div class="kbl-box">\n' +
                        '                    <div class="kblb-l">\n' +
                    '                            <label class="kblbl-mc '+ grey +'">'+ val.name +'</label>\n' +
                    '                            <label class="kblbl-sj '+ grey +'">有效期至'+ val.expire_time +'</label>\n' +
                        '                    </div>\n' +
                        '                    <div class="kblb-r">\n' +
                    '                            <div class="kblbr-je '+ grey +'">￥<label>'+ val.deduct_price +'</label></div>\n' +
                    '                            <label class="kblbr-tj '+ grey +'">满'+ val.min_price +'元可用</label>\n' +
                        '                    </div>\n' +
                        '                    <div class="clear"></div>\n' +
                        '                    <div class="kblb-sm">优惠券满'+ val.min_price +'元减'+ val.deduct_price +'元</div>\n' +
                        '                    <div class="kblb-zt">\n' +
                        '                        '+ img +'\n' +
                        '                    </div>\n' +
                        '                </div>'
                })
            }
            return html;
        }
    </script>
</block>